<script lang='ts' setup name='DepartmentList'>
import { ref } from 'vue'

import  DeprtmentEdit  from "./edit.vue";
import type { Department } from "@/api/types";

import useList from "@/hook/useList";

 //定义的 查询列表的接口
const listUrl = '/dept/list'
  //删除的URL
const removeUrl = '/dept/removeById/'


//editId = ref<number>
const {tableData ,show,editId,handleEdit,handleDelete,load,add,clostDialog} = useList<Department>(listUrl,removeUrl)





</script>

<template>

  部门
  <el-button @click="add">添加</el-button>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="id"  prop="id"> </el-table-column>
    <el-table-column label="name"  prop="name"> </el-table-column>
    <el-table-column label="address" prop="address"> </el-table-column>
    <el-table-column label="leader" width="180" prop="leader"> </el-table-column>
    <el-table-column label="active" width="180" prop="active"> </el-table-column>
    <el-table-column label="createTime" width="280" prop="createTime"> </el-table-column>


    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>


  <el-dialog  v-model="show" title="编辑"  width="500" >
       <DeprtmentEdit v-if="show" :clostDialog="clostDialog" :id="editId"> </DeprtmentEdit>
  </el-dialog>


</template>

<style scoped></style>